<template>
  <div class="box5">
    <p class="title">未来7天游客访问量趋势图</p>
    <p class="bg"></p>
    <div class="echart" ref="echart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

// 获取DOM元素
const echart = ref<HTMLDivElement | null>(null)
// 初始化数据
const data1 = ref<Array<[number, number]>>([])
const data2 = ref<Array<[number, number]>>([])
const myEcharts = ref<echarts.ECharts | null>(null)
const maxDataTime = ref(15) // 设置数据老化时间
let timer: ReturnType<typeof setTimeout> | null = null

onMounted(() => {
  createInitialData() // 创建初始数据

  // 初始化Echarts实例
  if (echart.value) {
    myEcharts.value = echarts.init(echart.value)

    // 配置折线图的选项
    const option = {
      xAxis: {
        type: 'time', // x轴类型设置为时间轴
        boundaryGap: false, // 时间轴不留白
        min: 'dataMin', // x轴最小值根据数据动态调整
        max: 'dataMax', // x轴最大值根据数据动态调整
      },
      yAxis: {
        type: 'value', // y轴类型设置为数值轴
      },
      series: [
        {
          name: '曲线1',
          type: 'line', // 折线图
          data: data1.value,
          symbolSize: 10, // 设置折线上的点的大小
          smooth: true, //是否平滑曲线
          areaStyle: {
            //填充区域
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)',
              },
              {
                offset: 1,
                color: 'rgb(1, 191, 236)',
              },
            ]),
          },
          emphasis: {
            focus: 'series',
          },
        },
        {
          name: '曲线2',
          type: 'line', // 折线图
          data: data2.value,
          symbolSize: 10, // 设置折线上的点的大小
          smooth: true, //是否平滑曲线
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 191, 0)',
              },
              {
                offset: 1,
                color: 'rgb(224, 62, 76)',
              },
            ]),
          },
          emphasis: {
            focus: 'series',
          },
        },
      ],
    }

    myEcharts.value.setOption(option)
    initEcahrt()
  }
})

onUnmounted(() => {
  // 清理定时器和 ECharts 实例
  if (timer) clearInterval(timer)
  if (myEcharts.value) myEcharts.value.dispose()
})

// 创建初始数据
const createInitialData = () => {
  let now: any = new Date()
  for (var i = 0; i < 1; i++) {
    let time = new Date(now - i * 1000)
    data1.value.push([time.getTime(), Number((Math.random() * 100).toFixed(0))])
    data2.value.push([
      time.getTime() + 300,
      Number((Math.random() * 100).toFixed(0)),
    ])
  }
}

const initEcahrt = () => {
  // 更新数据的定时器，每秒增加一个新数据点
  timer = setInterval(() => {
    let now = new Date()
    let time = new Date(now)

    // 只添加一个新数据点，避免添加过多点
    data1.value.push([time.getTime(), Number((Math.random() * 100).toFixed(0))])
    data2.value.push([
      time.getTime() + 300,
      Number((Math.random() * 100).toFixed(0)),
    ])

    // 移除过旧的数据点
    while (data1.value.length > 0) {
      if (time.getTime() - data1.value[0][0] > maxDataTime.value * 1000) {
        data1.value.shift()
      } else {
        break
      }
    }

    while (data2.value.length > 0) {
      if (time.getTime() - data2.value[0][0] > maxDataTime.value * 1000) {
        data2.value.shift()
      } else {
        break
      }
    }

    // 计算x轴最小值
    var maxXValue = Math.max(
      ...data1.value.concat(data2.value).map((item) => item[0]),
    )
    var minValue = maxXValue - maxDataTime.value * 1000

    // 更新图表，注意使用 .value 获取实际数据
    if (myEcharts.value) {
      myEcharts.value.setOption({
        xAxis: {
          min: minValue,
        },
        series: [
          {
            data: data1.value,
            animation: false,
          },
          {
            data: data2.value,
            animation: false,
          },
        ],
      })
    }
  }, 1000)
}
</script>

<style lang="scss" scoped>
.box5 {
  width: 100%;
  height: 100%;
  background: url('../../images/dataScreen-main-cb.png') no-repeat;
  background-size: 100% 100%;
  .title {
    margin-left: 10px;
    color: #fff;
    font-size: 20px;
  }
  .bg {
    width: 68px;
    height: 7px;
    background: url('../../images/dataScreen-title.png') no-repeat;
    background-size: cover;
    margin: 10px 0 0 0;
  }
  .echart {
    width: 100%;
    height: 250px;
  }
}
</style>
